<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 计算机二级考试平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', 'Noto Sans SC', sans-serif;
        }

        :root {
            --primary-color: #2A3F6B;
            --secondary-color: #4A90E2;
            --accent-color: #FF6B6B;
            --success-color: #4CAF50;
            --text-dark: #333;
            --text-light: #666;
            --bg-light: #f8f9fa;
            --border-radius: 12px;
            --shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        body {
            background: var(--bg-light);
        }

        /* 个人中心容器 */
        .profile-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        /* 用户信息头 */
        .profile-header {
            background: white;
            border-radius: var(--border-radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .avatar-wrapper {
            position: relative;
        }

        .user-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid var(--secondary-color);
        }

        .level-badge {
            position: absolute;
            bottom: 0;
            right: 0;
            background: var(--accent-color);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .user-info {
            flex: 1;
        }

        .username {
            color: var(--primary-color);
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .user-stats {
            display: flex;
            gap: 2rem;
        }

        .stat-item {
            text-align: center;
        }

        .stat-value {
            color: var(--secondary-color);
            font-size: 1.25rem;
            font-weight: bold;
        }

        .stat-label {
            color: var(--text-light);
            font-size: 0.875rem;
        }

        /* 仪表盘布局 */
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        /* 数据卡片 */
        .data-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 1.5rem;
            box-shadow: var(--shadow);
            transition: transform 0.3s;
        }

        .data-card:hover {
            transform: translateY(-5px);
        }

        .card-title {
            color: var(--primary-color);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* 学习进度 */
        .progress-ring {
            width: 120px;
            height: 120px;
            margin: 0 auto;
        }

        /* 最近活动 */
        .activity-list {
            list-style: none;
        }

        .activity-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 0;
            border-bottom: 1px solid #eee;
        }

        .activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--secondary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .activity-content {
            flex: 1;
        }

        /* 成就系统 */
        .badge-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
            gap: 1rem;
        }

        .badge-item {
            text-align: center;
        }

        .badge-icon {
            width: 60px;
            height: 60px;
            background: var(--success-color);
            border-radius: 50%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .profile-header {
                flex-direction: column;
                text-align: center;
            }

            .user-stats {
                flex-wrap: wrap;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <main class="profile-container">
        <!-- 用户信息头 -->
        <header class="profile-header">
            <div class="avatar-wrapper">
                <img src="../images/avatar.png" alt="用户头像" class="user-avatar">
                <div class="level-badge">Lv.3</div>
            </div>
            <div class="user-info">
                <h1 class="username">考神小助手</h1>
                <div class="user-stats">
                    <div class="stat-item">
                        <div class="stat-value">82%</div>
                        <div class="stat-label">总体进度</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">36h</div>
                        <div class="stat-label">学习时长</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">92</div>
                        <div class="stat-label">成就点数</div>
                    </div>
                </div>
            </div>
        </header>

        <!-- 仪表盘内容 -->
        <div class="dashboard-grid">
            <!-- 学习进度卡片 -->
            <section class="data-card">
                <h2 class="card-title">
                    <i class="fas fa-chart-line"></i>
                    学习进度
                </h2>
                <div class="progress-ring">
                    <svg viewBox="0 0 120 120">
                        <circle cx="60" cy="60" r="54" fill="none" 
                                stroke="#eee" stroke-width="12"/>
                        <circle cx="60" cy="60" r="54" fill="none"
                                stroke="#4A90E2" stroke-width="12" 
                                stroke-dasharray="339.292" 
                                stroke-dashoffset="122.145"/>
                    </svg>
                </div>
                <div class="progress-labels">
                    <div class="progress-subject">
                        <span>Word</span>
                        <span>65%</span>
                    </div>
                    <div class="progress-subject">
                        <span>Excel</span>
                        <span>82%</span>
                    </div>
                    <div class="progress-subject">
                        <span>PPT</span>
                        <span>45%</span>
                    </div>
                </div>
            </section>

            <!-- 最近活动 -->
            <section class="data-card">
                <h2 class="card-title">
                    <i class="fas fa-clock"></i>
                    最近活动
                </h2>
                <ul class="activity-list">
                    <li class="activity-item">
                        <div class="activity-icon">
                            <i class="fas fa-book"></i>
                        </div>
                        <div class="activity-content">
                            <h3>完成了「Excel函数」章节练习</h3>
                            <p>2小时前 · 正确率92%</p>
                        </div>
                    </li>
                    <li class="activity-item">
                        <div class="activity-icon">
                            <i class="fas fa-trophy"></i>
                        </div>
                        <div class="activity-content">
                            <h3>获得「模考达人」成就</h3>
                            <p>5小时前</p>
                        </div>
                    </li>
                </ul>
            </section>

            <!-- 成就系统 -->
            <section class="data-card">
                <h2 class="card-title">
                    <i class="fas fa-medal"></i>
                    我的成就
                </h2>
                <div class="badge-grid">
                    <div class="badge-item">
                        <div class="badge-icon">
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="badge-name">新人驾到</div>
                    </div>
                    <div class="badge-item">
                        <div class="badge-icon">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <div class="badge-name">百题斩</div>
                    </div>
                </div>
            </section>
        </div>
    </main>
    <script>
        // 动态更新进度环
function updateProgress(percentage) {
    const circle = document.querySelector('.progress-ring circle:last-child');
    const radius = circle.r.baseVal.value;
    const circumference = 2 * Math.PI * radius;
    const offset = circumference - (percentage / 100) * circumference;
    circle.style.strokeDashoffset = offset;
}

// 初始化进度
updateProgress(65);
    </script>
</body>
</html>